<template>
  <div class="wechatPayment-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>财务中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/cost' }">费用中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/order' }">充值订单</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="wechatPayment-content">
      <div class="title">
        充值订单
      </div>
      <!-- 表格 -->
      <div class="content tables">
         <div class="search">
             <el-form :inline="true" :model="formInline"  style="width:100%;display: flex;">
                <el-form-item label="时间段">
                 <el-time-picker  v-model="formInline.time"  is-range  range-separator="-"  start-placeholder="开始时间"  end-placeholder="结束时间"/>
                </el-form-item>
                <el-form-item label="订单编号">
                  <el-input v-model="formInline.no" placeholder="请输入订单编号" ></el-input>
                </el-form-item>
                <span class="btn">
                 <el-button round color="#0071bb" :icon="Search">搜索</el-button>
                 <el-button round  :icon="RefreshLeft">重置</el-button>
			     	    <el-button round :icon="Refresh">刷新</el-button>
               </span>
             </el-form>
         </div>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="no" label="订单号" />
					<el-table-column prop="oderTime" label="下单时间" />
					<el-table-column prop="payTime" label="支付时间" />
					<el-table-column prop="money" label="金额"/>
					<el-table-column prop="payBy" label="支付方式" />
					<el-table-column prop="status" label="交易状态" />
					<el-table-column prop="invoiceStatus" label="开票状态" />
				</el-table>
			</div>
      <!-- 底部分页 -->
			<div class="page_number">
				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"  :size="size"
					:disabled="disabled"  layout="prev, pager, next, jumper,total" :total="10"
					@size-change="handleSizeChange" @current-change="handleCurrentChange"/>
			</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Refresh, Search, RefreshLeft, HelpFilled } from "@element-plus/icons-vue";
const currentPage = ref(1);
const pageSize = ref(1);
const disabled = ref(false)
// 入账记录表格数据
const tableData = [
	{
		id: '1',
		no:"546113213231236541",
    oderTime:'2024-04-22 11:15:07',
    payTime:'2024-04-22 11:16:07',
    money:'¥ 150.00',
    payBy:"微信支付",
    status:"交易成功",
    invoiceStatus:"已开票"
	},
]
const formInline = ref({
  time: '',
  no: ''
})
const handleSizeChange = (val : number) => {
	console.log(`${val} items per page`)
}
const handleCurrentChange = (val : number) => {
	console.log(`current page: ${val}`)
}
</script>

<style scoped lang="scss">
.wechatPayment-page{
	padding: 20px 10px;
	box-sizing: border-box;
  background-color: #f1f1f1;
}
.wechatPayment-content{
	padding: 10px;
  background:#fff;
  margin-top:20px;
  border-radius:4px;
}
.title{
  color: #4D4D4D;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 10px;
}
// 统计
.statistic{
  width: 100%;
  border-radius: 20px;
  padding: 24px 10px;
  display: flex;
  // height: 130px;
  background: #0071bb;
  align-items: center;
  .item{
    width: 50%;
    // background: #0071bb;
    color: #fff;
    text-align: center;
    .name{
      // font-size: 12px;
    }
    .value{
      font-size: 24px;
      margin-left: 20px;
      font-weight: 500;
    }
  }
}
// 说明
.desc{
  padding: 10px 20px;
  margin-top: 10px;
  background: #00ffff;
  .text{
    color: #000000;
    // font-size: 18px;
    margin-bottom: 6px;
  }
  .formula{
    color: #666666;
    font-size: 12px;
  }
}
// tab表格
.tab{
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
   margin-bottom: 10px;
   padding: 0 10px;
   .search{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .btn{
            align-self: right;
        }
       
    }
    }
.apply{
  position: absolute;
  right: 30px;
}
</style>